---
import Icon from "../lib/Icon.astro"
export interface Props {
    class?: string
    sticky?: boolean
}
const { class: class_, sticky = false } = Astro.props
---

<header
    class:list={[
        "header",
        { [class_ as string]: class_, "header--sticky": sticky },
    ]}
>
    <slot name="back">
        <a href="/" class="link link--back">
            <Icon name="arrow-left" class="header__icon" />
            Главная
        </a>
    </slot>
    <a class="link--cv" href="/cv">Резюме</a>
</header>

<style>
    header {
        display: flex;
        padding: 1em;

        :global(.icon) {
            opacity: 0.5;
        }
        :global(.link--back) {
            display: flex;
            gap: 0.5em;
            align-items: center;
        }
        :global(a) {
            display: block;
            color: inherit;
            text-decoration: none;
        }
    }
    .header--sticky {
        position: var(--position, sticky);
        background-color: var(--background-color);
        top: 0;
    }
    .link--cv {
        margin-left: auto;
    }
</style>
